<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../../utils/vue.js"></script>
</head>

<body>
    <div id="app">

    </div>
    <script>
        // 基础组件：相对通用的/频繁使用的组件（比如只是包含了一个输入框/按钮之类的元素）
        // 基础组件会导致很多组件有一个包含基础组件的长列表, 但这些基础组件只用于模板的一小部分
        /* 比如用于下列的模板：
                <BaseInput v-model="searchText" v-on:keydown.enter="search"/>
                <BaseButton v-on:click="search">
                    <BaseIcon name="search"/>
                </BaseButton> 
        */
        import BaseButton from "./BaseButton.vue";
        import BaseIcon from "./BaseIcon.vue";
        import BaseInput from "./BaseInput.vue";
        export default {
            components: {
                BaseButton,
                BaseIcon,
                BaseInput
            }
        };
        // 如果使用了webpack或内部含webpack的vue cli3+，则可以使用 require.context 只全局注册这些非常通用的基础组件
        // 下面是一份在应用入口如main.js中全局导入基础组件的代码
        import Vue from "utils/vue";
        import upperFirst from "lodash/upperFirst";
        import camelCase from "lodash/camelCase";
        
        const requireComponent = require.context(
            // 其组件目录的相对路径
            "./components",
            // 是否查询目录
            false,
            // 匹配基础组件文件名的正则表达式
            /Base[A-Z]\w+\.(vue | js)$/,
        );

        requireComponent.keys().forEach(fileName => {
            // 获取组件配置
            const componentConfig = requireComponent(fileName);
            // 获取组件的PascalCase命名
            const componentName = upperFirst(
                camelCase(
                    // 获取和目录深度无关的文件名
                    fileName
                        .split("/")
                        .pop()
                        .replace(/\.\w+$/, ""),
                )
            );

            // 全局注册组件
            Vue.component(
                componentName,
                //若这个组件选项是通过‘export default’导出的
                // 那么就会优先使用‘.default’
                // 否则回退到使用模板的根
                componentConfig.default || componentConfig,
            );
        }); 
    </script>
</body>

</html>